<html>
  <head>
    <title></title>
    <style>
    
    div.iconic {
      padding-left: 26dip;
      background-repeat:no-repeat;
      background-position: 6dip center ;
      background-size: 24dip;
      background-image: url(samples/arrow-z.svg); /* svg that has no intrinsic styles */
      fill:blue; /* defining default fill color of used SVG image */
    }
    
    div.iconic:hover {
      fill:red;
    }

    div.iconic:active {
      fill:green;
    }
    
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>

  <p>On :hover and :active of the element below it shall change fill color of the SVG background image:</p>

  <div .iconic>hover me</div>


</body>
</html>
